<template>
  <view style="font-size: 14px;">

    <public-header :title="title"></public-header>
    <rList :config="config" :columnRowConfig="columnRowConfig" @on-list-item-checked="onItemChecked"
      :searchValKey="searchValKey" :condition="condition" style="height:calc(100vh - 6rem);overflow: hidden;">
      <template v-slot:rListItem="itemValue">
        <uni-row class="demo-uni-row" v-if="itemValue.item">
          <uni-col class="text-left text-blod" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            {{itemValue.item.member_name}}
          </uni-col>
          <uni-col class="text-right text-blod" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            {{itemValue.item.member_phone}}
          </uni-col>
          <uni-col class="text-right text-blod" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <uni-tag v-if="itemValue.item.member_state == '禁用'" :text="itemValue.item.member_state" :inverted="true"
              type="error" />
            <uni-tag v-if="itemValue.item.member_state == '生效'" :text="itemValue.item.member_state" :inverted="true"
              type="primary" />
            <uni-tag v-if="itemValue.item.member_state == '挂失'" :text="itemValue.item.member_state" :inverted="true"
              type="warning" />
          </uni-col>
        </uni-row>
      </template>

      <template v-slot:rLayoutRight>
      </template>
    </rList>
  </view>
</template>

<script>
  import rList from '@/components/retail-list/retail-list.vue'
  import lockscreen from '@/common/mixins/lockscreen.js'
  export default {
    mixins: [lockscreen],
    data() {
      return {
        title: "",
        config: {
          serviceName: "srvretail_store_stock_select",
          listLayout: "listAndFilter", // listAndDetail listAndFilter  list
          detailPath: "simple", //  simple  基础的； 或者配置页面路由 路由格式待定
          tabsType: "custom", //
          custTabs: [{
            "colName": "member_name,member_phone",
            "type": "input",
            "inputType": "String",
            "parent": "",
            "is_count": true,
            "show_expr": {},
            "label": "商品名称",
            "placeholder": "",
            "showLabel": false,
            "default": "",
            "colspan": 24,
            "showAllTag": true,
            "appendSearchButton": true
          }, {
            "colName": "goods_type",
            "type": "tree",
            _type: 'Select',
            "inputType": "tree",
            "label": "商品分类",
            "placeholder": "",
            "showLabel": false,
            "default": "",
            "colspan": 24,
            option_list_v2: [

            ]
          }],
          tabs: {
            layout: 'inline', // 'inline'   block
          },
          page: {
            pageNo: 1,
            rownumber: 20
          }
        },
        detailData: null,
        condition: [],
        searchVal: "",
        searchValKey: "member_phone", // 查询的字段名  "col,col,col"
        columnRowConfig: [{
          columns: ['', 'member_name', 'member_phone'],
          showType: "usercard", // usercard datapanel
          section: "",
          label: false,
          colspan: 4, // 列
          buttons: [{
            button_name: "编辑",
            button_type: "edit",
            service: {
              select: "",
              update: "",
              add: "",
              delete: ""
            }
          }]
        }, {
          columns: ['member_level', 'balance', 'integral'],
          showType: "datapanel", // usercard
          section: "",
          label: '会员卡',
          colspan: 6 // 列
        }]
      }
    },
    components: {
      rList
    },
    created() {
      this.config.custTabs[1].option_list_v2 = this.$store?.state?.$classifyList || []
    },
    methods: {
      onItemChecked(e) {
        console.log("onItemChecked", e)
      }
    },
    onLoad(option) {
      if (option.title) {
        this.title = option.title
      }
      console.log("option", option)
    },
    onShow(option) {

    }
  }
</script>

<style lang="scss" scoped>
  .list-detail {
    border-radius: 10rpx;
    background-color: #fff;
    box-shadow: #333;

  }
</style>
